antV G6 节点的配置方式总结

您所在的位置：网站首页 › lg g6参数配置 › antV G6 节点的配置方式总结

antV G6 节点的配置方式总结

2024-07-12 09:28| 来源: 网络整理| 查看: 265

antV G6 节点的配置方式总结配置节点的方式

配置节点的方式有四种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置，自定义节点时加入配置项参数。

这几种配置方法可以同时使用，

优先级：使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置 > 自定义节点时配置

即有相同的配置项时，

优先级高的方式将会覆盖优先级低的。

⚠️ 注意: 除 id、label 应当配置到每个节点数据中外，

其余的节点的通用属性以及各个节点类型的特有属性（见内置节点类型）均支持这三种配置方式。

自定义节点时，G6.registerNode(‘node-name’, {options: {}}),options里可以写配置

以上四种的具体配置方式如下

1.使用graph.node()

该方法必须在 render 之前调用，否则不起作用；

由于该方法优先级最高，将覆盖其他地方对节点的配置，这可能将造成一些其他配置不生效的疑惑；

该方法在增加元素、更新元素时会被调用，如果数据量大、每个节点上需要更新的内容多时，可能会有性能问题。

graph.node((node) => { return { id: node.id, type: 'rect', style: { fill: 'blue', }, }; });

2.在数据中动态配置

const data = { nodes: [ { id: "node", x: 200, y: 200, label: "Hello Node", style: { // 配置keyShape样式 fill: "orange" }, labelCfg: { // 配置文本shape style: { fill: "white" } }, stateStyles: { // 配置不同状态下的样式 hover: { fill: "black", // 配置文本在该状态下的样式 // 'text-shape': { fill: "red" } } } } ], edges: [ ... // 边 ] }

3.实例化图时全局配置

const graph = new G6.Graph({ container: 'container', width, height, fitCenter: true, modes: { default: ['drag-canvas', 'drag-node', 'zoom-canvas'], }, defaultNode: { type: 'sunset', size: 40, style: { fill: '#bae637', stroke: '#eaff8f', lineWidth: 1, radius: 10, }, labelCfg: { style: { fill: 'red' } } }, nodeStateStyles: { hover: { lineWidth: 5, stroke: "blue", 'text-shape': { fill: "blue" } }, }, labelStateStyles: { hover: { fill: "blue" } } });

4.在自定义节点的options中配置

G6.registerNode('sunset', { options: { size: 60, style: { fill: "orange" }, labelCfg: {}, stateStyles: { hover: { //... } } }, }, 'rect') 在 G6 中，有三种方式配置不同状态的样式：在实例化 Graph 时，通过 nodeStateStyles 和 edgeStateStyles 对象定义；在节点/边数据中，在 stateStyles 对象中定义状态；在自定义节点/边时，在 options 配置项的 stateStyles 对象中定义状态。

可为二值/多值状态设置 keyShape 样式以及其他子图形的样式。

⚠️ 注意: 多值状态和除 keyShape 以外的子图形状态样式设置在 V3.4 后支持。

hover: { fill: '#d3adf7', // name 为 shape-name1 的子图形在该状态值下的样式 // 比如为多状态下的文本配置，可通过api方法查看默认文本shape的名字为"text-shape" 'text-shape': { fontSize: 15 }, },

【本文地址】

antV G6 节点的配置方式总结

antV G6 节点的配置方式总结

今日新闻

推荐新闻